<%--
  Function: 
  User: PING
  Date: 2022/10/27

--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>

<h3>AJAX 演示例子</h3>
请选择对应国家：<select id="nation" name="nation">
             <option value="0" selected>--</option>
            <option value="1">中国</option>
            <option value="2">美国</option>
            <option value="3">日本</option>
            </select>
请选择喜欢城市： <select id="city" name="city">
                    <option value="0">--</option>
                </select>

<br><hr>
<h3>Ajax: POST 演示</h3>
<form id="rating-form">
    你对课程的评分：<br>
    <input type="radio" name="rating" value="5">5
    <input type="radio" name="rating" value="4">4
    <input type="radio" name="rating" value="3">3
    <input type="radio" name="rating" value="2">2
    <input type="radio" name="rating" value="1">1
    <br>
    理由是：<br>
    <textarea id="comment" cols="20" rows="5" ></textarea><br>
    <input type="button" value="确定"/>
</form>
<div class="showMsg" style="border:1px solid green; display:none; width:50%">
</div>
<!--
JS code
-->
<script>
    /**
     * Demo1: jQuery introduce
     */
    $(document).ready(function() {
        //alert("hello jquery!") ;

        /**
         * DEMO2: element selection
         *  by id
         *  by class
         *
         */
        var $select = $('#nation') ;
        var $showMsg = $('div.showMsg') ;

        // binding a function on changing event of select element
        $select.change(function(event) {
            // the logic for processing event
           // console.log("change event: " + event) ;

        }) ;

        // binding function to process click event of button
       var $btn = $('input[type=button]') ;
        $btn.click(function() {
            var ratingVal = $('input[type=radio]:checked').val() ;
            // render the nationId in the showMsg div
            $showMsg.html("<h3> Selected Value of RatingValue is " + ratingVal + "</h3>") ;
            $showMsg.css("display", "") ;
        })
    })

</script>
<script>
    /**
     * DMEO 3: AJAX request
     */
    $('#nation').change(function() {
        // step1. preparing data
        var nationId = $(this).val() ;
        console.log("the selected value: " + nationId) ;
        // step2. send ajax request
        $.ajax({
            url:"/01_jspBasics/test/nativeAjax", // url of server (api)
            type:"GET" , // get in default.
            dataType: "text",
            data:
                {
                    nationId: nationId,
                    action:"selectCity"
                },   // urlencoded
            success: function(res) {
                // step3. render the return data
                var cities = res.split("|") ;
                var $selectCity = $('#city') ;
                $selectCity.empty() ;
                $.each(cities, function(index, item) {
                    $selectCity.append("<option value=" + index +">" + item + "</option>")
                })
            },
            error: function() {
                alert("获取数据失败！") ;
            }
        }) ;
    })
    /**
     * DEMO 4.AJAX POST
     */
    $('input[type=button]').click(function() {
        // step1. preparing data
        var ratingVal = $('input[type=radio]:checked').val() ;
        var comment = $('textarea').val() ;

        // check two values
        var formData = {
            "ratingValue": ratingVal,
            "comment": comment,
            "action": "doRateByJSON"
        } ;
        // step2. send POST request
        $.ajax({
            url:"/01_jspBasics/test/nativeAjax",
            type: "POST", // must set if it was POST
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(formData),  // MUST stringify object if request was post.
            dataType: "json",
            success: function(res) {
                // step3. render return data
                $('.showMsg')
                    .html("<h3> retCode: " + res.code+ "</h3>")
                    .append("<h4> ratingValue: " + res.ratingValue+ "</h4>")
                    .append("<h5> comment: " + res.comment + "</h5>")
                    .css("display", "") ;
            },
            error: function() {
                alert("数据提交失败!") ;
            }
        })
    })

</script>
</body>
</html>
